<template>
  <div class="search">
    <form class="search_form" @submit.prevent="search">
      <van-field
        v-model="keyword"
        center
        clearable
        placeholder="请输入商家名称"
      >
        <template #button>
          <input type="submit" class="search_submit" value="搜索">
        </template>
      </van-field>
    </form>
    <section class="list" v-if="!noSearchShops">
      <ul class="list_container">
        <!--:to="'/shop?id='+item.id"-->
        <router-link :to="{path:'/detial', query:{id:item.id}}" tag="li"
                     v-for="item in searchShops" :key="item.id" class="list_li">
          <section class="item_left">
            <img :src="imgBaseUrl + item.image_path" class="restaurant_img">
          </section>
          <section class="item_right">
            <div class="item_right_text">
              <p>
                <span>{{item.name}}</span>
              </p>
              <p>月售 {{item.month_sales||item.recent_order_num}} 单</p>
              <p>{{item.delivery_fee||item.float_minimum_order_amount}} 元起送 / 距离{{item.distance}}</p>
            </div>
          </section>
        </router-link>
      </ul>
    </section>
    <div class="search_none" v-else>很抱歉！无搜索结果</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getShopList } from '@/api/home'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      imgBaseUrl: 'http://cangdu.org:8001/img/',
      noSearchShops: false
    }
  },
  computed: {
    ...mapState(['searchShops'])
  },
  methods: {
    search () {
      const keyword = this.keyword.trim()
      if (keyword) {
        this.$store.dispatch('searchShops', keyword)
      }
    }
  },
  async created () {
    const result = await getShopList(40.10038, 116.36867)
    this.shopList = result.data
  },
  watch: {
    searchShops (value) {
      if (!value.length) { // 没有数据
        this.noSearchShops = true
      } else { // 有数据
        this.noSearchShops = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-search__action {
  background: #02a774;
  color: white;
  font-size: 16px;
  font-weight: 700;
  width: 40px;
  text-align: center;
  margin: 0 5px;
  border-radius: 5px;
}
.search_submit {
  border: 4px solid #02a774;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  background-color: #02a774;
}
.list{
  .list_container{
    background-color: #fff;
    .list_li{
      display: flex;
      justify-content: center;
      padding: 10px;
      border-bottom: 1px solid ;
      .item_left{
        margin-right: 10px;
        .restaurant_img{
          width: 50px;
          height: 50px;
          display: block;
        }
      }
      .item_right{
        font-size: 12px;
        flex: 1;
        .item_right_text{
          p{
          line-height: 12px;
          margin-bottom: 6px;
          }
        }
      }
    }
  }
    .search_none{
      margin: 0 auto;
      color: #333;
      background-color: #fff;
      text-align: center;
      margin-top: 0.125rem;
    }
}
/deep/.van-field__control {
  border: 1px solid #ccc;
  height: 35px;
  border-radius: 5px;
}
</style>
